
import React, { Component } from 'react'

// import './index.css'

export default class index extends Component {

    constructor(props){

        super(props);

        this.handleFinished = this.handleFinished.bind(this);

    }

    // 鼠标是否移入

    state = {flag : false}

    handleMouse = flag => {

        return () => {

            this.setState({flag})

        }

    }

    // handleDelete = id =>{

    //     if(window.confirm("确定删除吗")){

    //         this.props.Deletetodo(id)

    //     }

    // }

    handleDelete(id){

        if(window.confirm("确定删除吗")){

            this.props.Deletetodo(id)

        }

    }

    handleFinished(){

        let status = this.props.status;

        status = (status === 0 ? 1 : 0);

        let obj = {

            id: this.props.id,

            name: this.props.name,

            status: status

          }

          this.props.finishedChange(obj); //执行父组件传来的方法

    }

    render() {

        // console.log("Item")

        // console.log(this)

        const {id,name, status}=this.props

        const {flag} = this.state

        return (

            <li  

            onMouseEnter={this.handleMouse(true)}

            onMouseLeave={this.handleMouse(false)}

            >

                <label>

                    <input type="checkbox" checked={status===1?true:false} onChange={this.handleFinished}/>

                        <span>{name}</span>

                </label>

                <button onClick={() => {this.handleDelete(id)}} className="btn btn-danger" style={{ display: 'block' }}>X</button>

            </li>

        )

    }

}
